Internetservice - Blog

bit4you präsentiert einen Blog rund um die Themen TYPO3, MySQL und PHP

Dynamische Menüs mit CSS und Javascript

BeitragVerfasst am: 13.12.2007, 09:49 Titel: Dynamische Menüs mit CSS und Javascript Antworten mit Zitat

I) JAVASCRIPT nav.js
====================

Code:
sfHover = function() {
var sfEls = document.getElementById(”hauptnav”).getElementsByTagName(”LI”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
}
}
}if (window.attachEvent) window.attachEvent(”onload”, sfHover);

II) TYPOSCRIPT
===========
1) Javascript und CSS-Stylesheets einbinden
———————————————————

Code:
page.headerData.10000 = TEXT
page.headerData.10000.value (
<script type=”text/javascript” language=”JavaScript” src=”fileadmin/js/nav.js”></script>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/style.css” media=”screen” />
<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/ie-style.css” media=”screen” />
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/style-print.css” media=”print” />
)


Zitat:
MS Internet Explorer, bedingte Kommentare siehe hier:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

2) Das Menü aufbauen
———————————————————

Code:
lib.MainNav = HMENU
lib.MainNav {
wrap = <ul id=”hauptnav”>|</ul>
#wrap = <ul>|</ul>
special = directory
special.value = 21 = TMENU
1.expAll = 1
1.NO = 1
1.NO.ATagParams = class=”navilink”
1.NO.wrapItemAndSub = <li>|</li>1.ACT = 2
1.ACT.ATagParams = class=”navilink”
1.ACT.wrapItemAndSub = <li class=”active”>|</li>
1.ACT.wrapItemAndSub = <li>|</li>
1.ACT.expAll = 1

2 < .1
2.wrap = <ul>|</ul>
2.ACT.wrapItemAndSub = <li class=”active”>|</li>
2.ACT.wrapItemAndSub = <li>|</li>

# 2. Ebene: falls Einträge auf dritter Ebene vorhanden
# den Linktext mit Pfeilspize markieren
2.IFSUB = 1
2.IFSUB.ATagParams = class=”navilink”
2.IFSUB.stdWrap.wrap = | >
2.IFSUB.wrapItemAndSub = <li>|</li>

# 2. Ebene, aktiver Zustand: falls Einträge auf dritter Ebene vorhanden
# den Linktext mit Pfeilspize markieren
2.ACTIFSUB = 1
2.ACTIFSUB.ATagParams = class=”navilink”
2.ACTIFSUB.stdWrap.wrap = | >
2.ACTIFSUB.wrapItemAndSub = <li>|</li>

3 < .2
3.wrap = <ul>|</ul>
3.ACT.wrapItemAndSub = <li class=”active”>|</li>
3.ACT.wrapItemAndSub = <li>|</li>

}

III) CSS
======
A) Hauptstylesheet style.css
——————————————–

wirkt für alle Browser, sofern die Definitionen nicht im Spezialstyleheet (siehe III B) für Internet Explorer überschrieben werden.

Hinweis: die richtige Reihenfolge der CSS-Definitionen ist wichtig

Code:
/* = = = = = = = = = = ALLGEMEINE DEFINITIONEN S T A R T = = = = = = = = = = */
a:link, a:visited, a:hover {
text-decoration : none;
}/* = = = = = = = = = = ALLGEMEINE DEFINITIONEN E N D E = = = = = = = = = = */

Code:
/* = = = = = = = = NAVIGATION ANFANG = = = = = = = = */


Den DIV- Container formatieren, der das Menü enthält

Code:
.navi {
background: url(/fileadmin/templates/images/menubg.gif) repeat-x;
width: 932px;
border-left: 2px solid white;
border-bottom: 2px solid white;
height: 30px;
font-weight: bold;
margin: 0px;
padding: 0px;
text-transform: uppercase;
}


Grundlegende Einstellungen für die waagrechte Hauptmenüzeile
height := Höhe Hauptmenüzeile

Code:
#hauptnav, #hauptnav ul {
padding: 0;
margin: 0;
list-style: none;
height: 30px;
font-size: 10px;
}#hauptnav li:hover a, #hauptnav li.active a, #hauptnav li.sfhover a {
background: url(/fileadmin/templates/images/menubgaktiv.gif) repeat-x;
}#hauptnav li {
float: left;
margin: 0;
padding: 0;
}


submenus ab Ebene1 ausblenden
border-top := Abstand und Rand oben, der einzelnen Einträge
width := Breite Ebene 2
height := Zeilenhöhe Ebene 2
margin 30px . . . := unter das waagrechte Menü mit Höhe 30 Pixel setzen
margin . . . -1px := Positionskorrektur

Code:
#hauptnav li ul {
clear: both;
position: absolute;
width: 155px;
left: -999em;
margin: 30px 0 0 -1px;
padding: 0;
border-top: 2px solid #fff;
font-size: 11px;
height: 14px;
width: 137px;
padding: 0px 0 2px 0;
}


submenus ab Ebene1 einblenden
width := Breite Ebene 2
height := Zeilenhöhe Ebene 2

Code:
#hauptnav li:hover ul, #hauptnav li.sfhover ul {
left: auto;
font-size: 11px;
height: 14px;
width: 137px;
padding: 0 0 2px 0;
}


wenn submenu Ebene1 eingeblendet dann untergeordnete Ebenen ausblenden

Code:
#hauptnav li:hover ul li ul, #hauptnav li.sfhover ul li ul {
position: absolute;
width: 155px;
left: -999em;
margin: -1px 0 0 -1px;
padding: 0;
border-top: 1px solid #fff;
}


wenn submenu Ebene1 eingeblendet dann untergeordnete Ebene des aktiven Eintrags einblenden
width := Breite Ebene 2
height := Zeilenhöhe Ebene 2

Code:
#hauptnav li ul li:hover ul, #hauptnav li ul li.sfhover ul {
left: 151px;
top: auto;
font-size: 11px;
height: 14px;
width: 137px;
padding: 0 0 2px 0;
}


Abstände Menüs auf 3. Ebene
margin-left := angepasst an Breite Ebene 2
margin-top := vertikale Positionskorrektur

Code:
#hauptnav li ul li ul {
margin-top: 5px;
margin-left: 144px;
}


Hintergrundfarbe hovernder Link in Untermenüs hier einstellen
width := Breite Ebene 2
height := Zeilenhöhe Ebene 2

Code:
#hauptnav li:hover ul li a:hover, #hauptnav li.sfhover ul li a:hover {
background: #678BBF;
font-size: 11px;
height: 14px;
width: 137px;
padding: 0 0 2px 0;
}


Formatierung horizontale Menuehauptzeile
border-right := horizontale Abstände der einzelnen Einträge

Code:
#hauptnav li a.navilink:link, #hauptnav li a.navilink:visited {
display : inline;
color: white;
font-size: 12px;
border-right: 2px solid white;
height: 22px;
float: left;
padding : 8px 0 0 12px;
width: 219px;
}#hauptnav li a.navilink:hover {
background: url(/fileadmin/templates/images/menubgaktiv.gif) repeat-x;
display : inline;
color: white;
font-size: 12px;
border-right: 2px solid white;
height: 22px;
float: left;
padding : 8px 0 0 12px;
width: 219px;
}#hauptnav li a.navilinkaktiv:link, #hauptnav li a.navilinkaktiv:visited, #hauptnav li a.navilinkaktiv:hover {
background: url(/fileadmin/templates/images/menubgaktiv.gif) repeat-x;
display : inline;
color: white;
height: 22px;
font-size: 12px;
border-right: 2px solid white;
float: left;
padding : 8px 0 0 12px;
width: 219px;
}
/* ENDE Formatierung horizontale Menuehauptzeile */


Submenuetexte Schriftformattierung

Code:
#hauptnav li ul li a.navilink:link, #hauptnav li ul li a.navilink:visited, #hauptnav li ul li a.navilink:hover,
#hauptnav li ul li a.navilinkaktiv:link, #hauptnav li ul li a.navilinkaktiv:visited, #hauptnav li ul li a.navilinkaktiv:hover {
padding: 0 0 2px 12px;
font-size: 11px;
font-weight: normal;
text-transform: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
height: 14px;
width: 137px;
}


Hintergrundfarbe Menüeintrag 2. Ebene falls Mauszeiger in untergeordnetem Menü auf 3. Ebene unterwegs ist.

Code:
#hauptnav li ul li:hover a, #hauptnav li ul li.sfhover a {
background: #678BBF;
}


Hintergrundfarbe Menüs

Code:
#hauptnav li ul li:hover ul li a, #hauptnav li ul li.sfhover ul li a {
background: #8cb2dd;
}

Code:
/* = = = = = = = = NAVIGATION ENDE = = = = = = = = */

III) CSS
======
A) Spezialstylesheet ie-style.css
——————————————–

Ãœberschreibt Einstellungen aus dem Hauptstylesheet um Unterschiede, die aus der unterschiedlichen Handhabung des Boxmodels bei MS IE Browsern resultieren, zu kompensieren

Code:
#hauptnav li ul {
margin: 0px 0 0 -1px;
font-size: 11px;
}
#hauptnav li ul li:hover ul, #hauptnav li ul li.sfhover ul {
margin: -18px 0 0 0;
left: 150px;
font-size: 11px;
}
* html #hauptnav li ul li:hover ul, * html #hauptnav li ul li.sfhover ul {
margin: -19px 0 0 0;
}

IV) HTML index.html
================

1) Javascript und CSS- Stylesheet im Seitenkopf einbinden

Code:
<script type=”text/javascript” language=”JavaScript” src=”fileadmin/js/nav.js”></script>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/style.css” media=”screen” />
<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/ie-style.css” media=”screen” />
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/style-print.css” media=”print” />


Zitat:
MS Internet Explorer, bedingte Kommentare siehe hier:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

2) Menücode im body

Code:
<div class=”navi”>
<ul id=”hauptnav”>
<li><a href=”index.php?id=8″ onfocus=”blurLink(this);” class=”navilink”>Technische Dokumentation</a>
<ul>
<li><a href=”index.php?id=22″ onfocus=”blurLink(this);” class=”navilink”>Redaktion ></a>
<ul>
<li><a href=”index.php?id=30″ onfocus=”blurLink(this);” class=”navilink”>SPEC 1000D</a></li>
<li><a href=”index.php?id=29″ onfocus=”blurLink(this);” class=”navilink”>Online-Dokumentation</a></li>
<li><a href=”index.php?id=28″ onfocus=”blurLink(this);” class=”navilink”>Tools</a></li>
</ul></li>
<li><a href=”index.php?id=21″ onfocus=”blurLink(this);” class=”navilink”>Ersatzteilkataloge ></a>
<ul>
<li><a href=”index.php?id=32″ onfocus=”blurLink(this);” class=”navilink”>B007</a></li>
<li><a href=”index.php?id=31″ onfocus=”blurLink(this);” class=”navilink”>SPEC 2000M</a></li>
</ul></li>
<li><a href=”index.php?id=20″ onfocus=”blurLink(this);” class=”navilink”>Grafik / Design</a></li>
<li><a href=”index.php?id=19″ onfocus=”blurLink(this);” class=”navilink”>Multimedia</a></li>
<li><a href=”index.php?id=18″ onfocus=”blurLink(this);” class=”navilink”>Qualitätssicherung</a></li>
<li><a href=”index.php?id=17″ onfocus=”blurLink(this);” class=”navilink”>Tools</a></li>
</ul></li>
<li><a href=”index.php?id=7″ onfocus=”blurLink(this);” class=”navilink”>Schulung</a>
<ul>
<li><a href=”index.php?id=26″ onfocus=”blurLink(this);” class=”navilink”>CBT / CUA</a></li>
<li><a href=”index.php?id=25″ onfocus=”blurLink(this);” class=”navilink”>DUH</a></li>
<li><a href=”index.php?id=24″ onfocus=”blurLink(this);” class=”navilink”>klassisch</a></li>
<li><a href=”index.php?id=23″ onfocus=”blurLink(this);” class=”navilink”>Tools</a></li>
</ul></li>
<li><a href=”index.php?id=6″ onfocus=”blurLink(this);” class=”navilink”>Logistische Analysen</a></li>
<li><a href=”index.php?id=5″ onfocus=”blurLink(this);” class=”navilink”>Software-Entwicklung</a></li>
</ul>
</div>

Kommentare sind zur Zeit geschlossen.

Internetservice - Blog läuft unter Wordpress 2.3.2
Anpassung und Design: bit4you :: Waldseer Str. 14 :: 88250 Weingarten